<template>
  <div>
    <NavBar cakename="确认订单"></NavBar>
    <div class="body">
      <!--地址 -->
      <div class="flex justify-between p-30 ress m-t-20" @click="showdizi">
        <div class="color-red" v-if="!userlist[0].address">请选择收货地址</div>
        <div v-for="item in userlist" :key="item.id" v-else>
            {{item.name}} {{item.tel}}
            <div>{{item.address}}</div>
        </div>
       
        <div >
          <i class="iconfont icon-bianji color-red" style="font-size: 24px"></i>
        </div>
      </div>
      
      <!-- 图片 -->
      <div class="m-t-20">
        <img
          :src="setlist.wap_picture"
          alt=""
          style="width: 20.2rem; height: 20.2rem"
        />
      </div>

      <van-popup
        :show="show.time"
        position="right"
        :style="{ height: '100%', width: '100%' }"
        @click-overlay="showtime"
      >
        <van-nav-bar title="配送时间" @click-left="showtime">
          <template #right>
            <van-icon name="cart" size="18" />
          </template>
          <template #left>
            <van-icon name="arrow-left" size="18" />
          </template>
        </van-nav-bar>

        <div class="">
          <van-datetime-picker
            v-model="currentDate"
            type="month-day"
            title="选择月日"
            :min-date="minDate"
            :max-date="maxDate"
            :formatter="formatter"
            @confirm="handletime"
          />
          <div class="flex m-t-20 flex-wrap p-30 justify-center">
            <span
              v-for="(item, index) in timelist"
              :key="index"
              :class="[idx == index ? 'active' : '', 'time']"
              @click="idx = index"
              >{{ item }}</span
            >
          </div>
        </div>
      </van-popup>
      <!-- 时间 -->
      <div class="flex justify-between p-30 border color-red" @click="showtime">
        <div>
          配送时间: <span style="color: red">{{ time }}</span>
        </div>
        <i class="iconfont icon-shuangxianyoujiantou"></i>
      </div>

      <!-- 会员 -->
      <div class="flex justify-between p-30 border color-red">
        <div>会员权益</div>
        <i class="iconfont icon-shuangxianyoujiantou"></i>
      </div>

      <!--代金券 -->
      <div class="flex justify-between p-30 border color-red">
        <div>代金券</div>
        <i class="iconfont icon-shuangxianyoujiantou"></i>
      </div>

      <!-- 支付方式 -->
      <div class="flex justify-between p-30 border color-red">
        <div>支付方式</div>
        <i class="iconfont icon-shuangxianyoujiantou"></i>
      </div>

      <!-- 附属商品 -->
      <div class="flex justify-between p-30 border color-red">
        <div>附属商品</div>
        <i class="iconfont icon-shuangxianyoujiantou"></i>
      </div>

      <!-- 订单备注 -->
      <div class="flex justify-between p-30 border color-red">
        <div>订单备注</div>
        <i class="iconfont icon-shuangxianyoujiantou"></i>
      </div>

      <!-- 发票信息 -->
      <div class="flex justify-between p-30 border color-red">
        <div>发票信息</div>
        <i class="iconfont icon-shuangxianyoujiantou"></i>
      </div>

      <!-- 底部菜单 -->
      <div class="footer">
        <div>商品总价:￥{{ setlist.discount_price }}</div>
        <div class="yes">
          <span>确认下单</span>
          <span class="m-t-10">￥{{ setlist.discount_price }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import NavBar from "../components/NavBar.vue";
import { ref, reactive } from "vue";
import { useRoute, useRouter } from "vue-router";
import {useStore} from "vuex"
let show = reactive({
  time: false,
  dizi: false,
});
let store=useStore()
let router=useRouter()
let userlist=store.state.address.addressList

const showtime = () => {
  show.time = !show.time;
};
const showdizi = () => {
  router.push("/address")
};
let route = useRoute();
console.log(route.query);
let setlist = route.query;
let idx = ref(0);
let time = ref("2022/9/3/ 11:00");

const currentDate = ref(new Date());
const formatter = (type, val) => {
  if (type === "month") {
    return `${val}月`;
  }
  if (type === "day") {
    return `${val}日`;
  }
  return val;
};
let minDate = new Date();
let maxDate = new Date(2025, 10, 1);

let timelist = [
  "11:00",
  "12:00",
  "13:00",
  "14:00",
  "15:00",
  "16:00",
  "17:00",
  "18:00",
  "19:00",
];
let handletime = (value) => {
  show.time = false;
  let m = value.getMonth() + 1;
  let d = value.getDate();
  let t = timelist[idx.value];
  time.value = `2022/${m}/${d} ${t}`;
  console.log(time.value);
};

</script>

<style lang="less" scoped>
:deep(.van-nav-bar .van-icon),
:deep(.van-nav-bar__title) {
  color: #a36663;
}
.ress {
  border: 2px solid #aaa;
  border-image: url()
    2 2 round;
}
.border {
  height: 5rem;
  border-bottom: 1px solid #f5e5e4;
  align-items: center;
}
.footer {
  width: 73rem;
  display: flex;
  color: #9a5b57;
  justify-content: space-between;
  align-items: center;
  background: #e5e6e8;
  height: 10.6rem;
  padding-left: 2rem;
  position: fixed;
  bottom: 0;
  left: 0;
}
.yes {
  width: 18rem;
  height: 10.6rem;
  background: #492321;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-size: 14px;
}

.time.active {
  background: red;
  color: #fff;
}
.time {
  width: 65px;
  height: 30px;
  border: 1px solid #a36663;
  font-size: 16px;
  text-align: center;
  line-height: 30px;
  margin: 10px;
}
</style>